<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap作业</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <nav class="navbar navbar-inverse navbar-fixed-top" id="navcolor">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand" style="margin-left: 100px;">Project name</a>
                </div>
                <form class="nav navbar-nav navbar-form" style="margin-left: 42%;">
                <div class="form-group">
                    <input type="text"  class="form-control" style="width: 150px;" placeholder="Emall">
                </div>
                <div class="form-group">
                    <input type="text"  class="form-control" style="width: 200px;" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-default" 
                style="background-color: rgb(10, 230, 156);color: azure;border: none;">submit</button>
                </form>
            </div>
        </nav>
    </div>


    <div class="jumbotron">
        <div class="container-fluid">
            <h1 style="margin-left: 100px;">hello world</h1>
            <p style="margin-left: 100px;">Lorem,ipsum dolor sit amet consectetur adipisicing elit.
                Voluptatum reiciendis vel consequatur odio veniamesse laudantium ipsam
            </p>
            <p style="margin-left: 100px;">unde perspiciatis ullam! Molestias,ducimus magni officiis eius
                 at consequatur sed praesentium ratione!</p>
            <a class="btn btn-primary btn-lg" href="https://v3.bootcss.com/components/#jumbotron" 
            target="_blank" style="margin-left: 100px;">Learn more
            <b>》</b>
            </a>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-2 col-md-3">
            <div>
                <div class="caption" style="margin-left: 100px;">
                    <h2>Heading</h2>
                    <p>Lorem ipsum dolor sit amet consectetur</p> 
                    <p>adipisicing elit.Odio,quam nesiunt sint </p>
                    <p>harum fugit minima voluptates id sunt </p> 
                    <p>nemo hic aspernatur maxime commodi.</p>
                    <p>voluptatibus aut maxime,iusto iure</p>
                    <p>expedita?</p> 
                    <a href="#" class="btn btn-default" role="button">Learn more >></a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div style="margin-left: 40px;">
                <div class="caption">
                    <h2>Heading</h2>
                    <p>Lorem ipsum dolor sit amet consectetur</p> 
                    <p>adipisicing elit.Odio,quam nesciunt sint </p>
                    <p>harum fugit minima voluptates id sunt </p> 
                    <p>nemo hic aspernatur maxime commodi.</p>
                    <p>voluptatibus aut maxime,iusto iure</p>
                    <p>expedita?</p> 
                    <a href="#" class="btn btn-default" role="button">Learn more >></a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div>
                <div class="caption">
                    <h2>Heading</h2>
                    <p>Lorem ipsum dolor sit amet consectetur</p> 
                    <p>adipisicing elit.Odio,quam nesciunt sint </p>
                    <p>harum fugit minima voluptates id sunt </p> 
                    <p>nemo hic aspernatur maxime commodi.</p>
                    <p>voluptatibus aut maxime,iusto iure</p>
                    <p>expedita?</p> 
                    <a href="#" class="btn btn-default" role="button">Learn more >></a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div>
                <div class="caption">
                    <h2>Heading</h2>
                    <p>Lorem ipsum dolor sit amet consectetur</p> 
                    <p>adipisicing elit.Odio,quam nesciunt sint </p>
                    <p>harum fugit minima voluptates id sunt </p> 
                    <p>nemo hic aspernatur maxime commodi.</p>
                    <p>voluptatibus aut maxime,iusto iure</p>
                    <p>expedita?</p> 
                    <a href="#" class="btn btn-default" role="button">Learn more >></a>
                </div>
            </div>
        </div>
    </div>
    <footer style="margin-left: 100px;"><br><br>
        <p>&copy;2016 Company.Inc.</p>
    </footer>
</body>
</html>